<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import * as THREE from 'three'
import BIRDS from 'vanta/src/vanta.birds'
import { User, Lock, Key, Picture, Loading, View, Hide } from '@element-plus/icons-vue'
import { type LoginRequestData } from '@/api/login/types/login'
import type { FormInstance, FormRules } from 'element-plus'
import Theme from '@/components/Theme.vue'
import { getActiveThemeName } from '@/utils/cache/local-storage'
import { watchEffect } from 'vue'
const login = ref()

const passwordType = ref<'text' | 'password'>('password')
const loginFormRef = ref<FormInstance | null>(null)
const loginForm: LoginRequestData = reactive({
  name: 'admin',
  password: '123456',
  code: ''
})

const rules: FormRules = {
  name: [{ required: true, message: '未输入用户名', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
  ],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
}
//登录方法
const submitForm = (Form: LoginRequestData) => {
  console.log('点击登录')
}
//重置表单
const resetForm = (Form: any) => {
  console.log('点击重置')
  Form.name = ''
  Form.password = ''
  Form.code = ''
}

//飞鸟背景

onMounted(() => {
  // watchEffect(() => {
  //   // const theme = ref(getActiveThemeName)
  //   // console.log('当前主题', theme.value)
  // })
  // console.log('背景', themeBgColor.value)
  login.value = BIRDS({
    el: login.value,
    THREE: THREE,
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.0,
    minWidth: 200.0,
    scale: 1.0,
    scaleMobile: 1.0,
    backgroundColor: 0x245291,
    color1: 0xff1e45,
    color2: 0x69ebeb,
    wingSpan: 18.0,
    speedLimit: 4.0
  })
})
onUnmounted(() => {
  login.value.destroy()
  console.log('组件卸载了?')
})
</script>
<template>
  <div>
    <Theme class="theme"></Theme>
    <div class="login-container" ref="login" style="width: 100vw; height: 100vh">
      <div class="login-box">
        <h3 class="title">数字可视化平台</h3>
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="rules"
          label-width="auto"
          class="login-Form"
          status-icon
        >
          <el-form-item label="Name" prop="name">
            <el-input v-model="loginForm.name" :prefix-icon="User" placeholder="请输入您的用户名" />
          </el-form-item>
          <el-form-item label="Password" prop="password">
            <el-input
              type="password"
              v-model="loginForm.password"
              show-password
              :prefix-icon="Lock"
            />
          </el-form-item>
          <el-form-item class="form-item-but">
            <el-button type="primary" @click="submitForm(loginForm)">登录</el-button>
            <el-button @click="resetForm(loginForm)">Reset</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.login-box {
  width: vh(400);
  height: vh(400);
  border-radius: 100%;
  box-shadow: 0px 0px 15px rgb(255, 255, 255);
  transition: 2s;
  padding: 30px;
  scale: 0.9;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .el-form {
    opacity: 1;
  }
  color: white;
}
.login-box:hover {
  color: black;
  scale: 1;
  width: vh(450);
  height: vh(600);
  border-radius: 15px;
  box-shadow: 0px 0px 25px rgb(18, 57, 104);
  background-color: white;
  .el-form-item {
    margin-bottom: vh(40);
  }
}
.form-item-but {
  display: flex;
  justify-content: space-between;
}
.title {
  margin-bottom: vh(40);
}
.el-button {
  margin: auto;
}
.theme {
  position: fixed;
  z-index: 1000000;
  right: 10px;
  top: 10px;
}
</style>
